<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElPagination } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { getBookInformation } from '@/apis/bookInformation'; // 修改为具体的路径
import { getCurrentInstance } from 'vue';

const readHistory = ref(true);
const route = useRoute();
const contentDirectory = ref(null);
const directoryArray = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const bookInfo = ref(null);
const id = ref(null);
const router = useRouter();
const { proxy } = getCurrentInstance()
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return directoryArray.value.slice(start, end);
});

const getDirectory = async () => {
  try {
    id.value = route.params.id;
    bookInfo.value = await getBookInformation(route.params.id,proxy);
    console.log('Book Information:', bookInfo.value);
    if (bookInfo.value && bookInfo.value.chapter) {
      directoryArray.value = bookInfo.value.chapter;
      console.log('Directory Array:', directoryArray.value);
      if (directoryArray.value.length > 0) {
        contentDirectory.value = directoryArray.value[directoryArray.value.length - 1];
        console.log('Content Directory:', contentDirectory.value);
      } else {
        console.warn('Directory Array is empty.');
      }
    } else {
      console.error('Invalid book information format:', bookInfo.value);
    }
  } catch (error) {
    console.error('Error fetching book information:', error);
  }
};

onMounted(() => {
  getDirectory();
});

const navigateToChapter = (item) => {
  console.log(route.params.id, item.chapter_index); // 修改路由参数获取方式
  router.push(`/reader/${route.params.id}/${item.chapter_index}`);
};

</script>

<template>
  <div class="directory">
    <div v-if="readHistory === true">
<!--      <div class="history">-->
<!--        <p style="margin: 10px">您已阅读至</p>-->
<!--        <p style="margin: 10px"> {{ bookInfo?bookInfo.chapter[0].title:'' }}</p>-->
<!--      </div>-->
    </div>
    <div class="directory-head">
      <p style="color: sandybrown; font-size: 30px; margin: 10px 20px 10px 20px; font-weight: bolder">正文</p>
      <p style="opacity: 0.5; margin: 10px 20px 10px 0">共{{ directoryArray.length }}章</p>
      <p style="opacity: 0.5">共{{ bookInfo?.word_count}}字</p>
    </div>
    <div class="directory-content">
      <div class="chapter" v-for="item in currentPageData" :key="item.id">
        <p @click="navigateToChapter(item)" class="directory-title">
          {{ item.title }}
        </p>
      </div>
    </div>
    <div class="pagination">
      <el-pagination layout="prev, pager, next" :total="directoryArray.length" :page-size="pageSize"
        v-model:current-page="currentPage" />
    </div>
  </div>
</template>

<style scoped>
.history {
  width: 900px;
  height: 50px;
  background-color: #ece9e9;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  margin: 10px;
}

.directory-head {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.directory-content {
  margin: 20px;
  display: flex;
  flex-direction: column;
}

.directory-title {
  margin: 20px 50px 20px 10px;
  font-size: 20px;
  font-weight: bold;
}

.directory-title:hover {
  color: red;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 20px;
}
</style>
